﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Love You</title>
    <style type="text/css">
        /*@font-face {*/
        /*font-family: digit;*/
        /*src: url(img/love.jfif) format("truetype");*/
        /*}*/

        #mainDiv {
            position: absolute;
        }
    </style>

    <link href="css/default.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/garden.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
    <script src="js/easeljs.min.js"></script>

</head>

<body>
<div id="mainDiv" style="height: 100%;width: 100%;">
    <center><audio src="love.mp3" id="bgMusic" autoplay controls></audio></center>
    <div id="content">
        <div id="code" style="margin: 0 auto;">
            <span class="comments">/**</span><br/>
            <span class="space"/><span class="comments"><i style="font-size: 30px">*2020—03-01,</i></span><br/>
            <span class="space"/><span class="comments"><i style="font-size: 30px">*2020-04-07.</i></span><br/>
            <span class="space"/><span class="comments"><i style="font-size: 30px">*/</i></span><br/>
            <b style="font-size: 30px;color: black">Boy name = </b><span class="keyword"><i
                style="font-size: 30px">Mr</i></span> <i style="font-size: 30px;color: black;">xxx</i><br/>
            <b style="font-size: 30px;color: black">Girl name = </b><span class="keyword"><b
                style="font-size: 30px">Mrs</b></span> <i style="font-size: 30px;color: black;">xxx</i><br/>
            <br>
            <i style="font-size: 30px;color: black">前世，</i><br>
            <i style="font-size: 30px;color: black">我将指环扣入你指间,你的胸口烙印着我的气息.</i><br>
            <br>
            <i style="font-size: 30px;color: black">今生,</i><br>
            <i style="font-size: 30px;color: black">我寻你而来,梦绕魂牵,红丝缱绻,飞舞红尘,你在何方.</i><br>
            <br>
            <i style="font-size: 30px;color: black">环圈前世，</i><br>
            <i style="font-size: 30px;color: black">只为许你今生的爱恋!</i><br>
            <br>
            <i style="font-size: 30px;color: black">今生有幸相遇,</i><br>
            <i style="font-size: 30px;color: black">愿我们在未来之路无论风雨都可以携手并进,共白头!</i><br>
            <br>
            <i style="font-size: 30px;color: blue;">I want to say:</i><br/>
            <i style="font-size: 30px;color: blue;">Baby, I love you forever.</i><br/>
        </div>
        <div id="loveHeart">
            <canvas id="garden"></canvas>

            <div id="words">
                <div style="width: 100%;top : 0px;" id="clear">
                    <div id="img1"><img style="width: 100px;height: 100px;" src="boy.jpg"/></div>
                    <div id="img2"><img style="width: 100px;height: 100px;" src="girl.jpg"/></div>
                </div>
                <div id="messages">
                    亲爱的梅，这是我们相识在一起的时光。
                    <div id="elapseClock"></div>
                </div>
                <div id="loveu">
                    <a style="color: black">爱你直到永永远远。</a><br/>
                    <div class="signature">- 爱你的<b style="color: blueviolet;font-size: 30px;">xxx</b></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="height: 100%">
    <canvas id="canvas"></canvas>
</div>


<script type="text/javascript">
    var offsetX = $("#loveHeart").width() / 2;
    var offsetY = $("#loveHeart").height() / 2 - 55;
    var together = new Date();
    together.setFullYear(2020, 2, 1);
    together.setHours(0);
    together.setMinutes(0);
    together.setSeconds(0);
    together.setMilliseconds(0);

    if (!document.createElement('canvas').getContext) {
        var msg = document.createElement("div");
        msg.id = "errorMsg";
        msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
        document.body.appendChild(msg);
        $("#code").css("display", "none")
        $("#copyright").css("position", "absolute");
        $("#copyright").css("bottom", "10px");
        document.execCommand("stop");
    } else {
        setTimeout(function () {
            startHeartAnimation();
        }, 5000);

        timeElapse(together);
        setInterval(function () {
            timeElapse(together);
        }, 500);

        adjustCodePosition();
        $("#code").typewriter();
    }

</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    function autoPlayAudio() {
        wx.config({
            // 配置信息, 即使不正确也能使用 wx.ready
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
            var globalAudio=document.getElementById("bgMusic");
            globalAudio.play();
        });
    };
    // 解决ios音乐不自动播放的问题
    autoPlayAudio();
</script>
</body>
<script src="js/index.js"></script>
<script src='js/easeljs.min.js'></script>

</html>